<template>
  <div v-if="articleLoading">
    <h1 class="title">{{ article.title }}</h1>
    <div class="tct">
      <i class="el-icon-time marginrl"></i>发表于
      <span>{{ article.date }}</span>
      <span class="marginrl">|</span>
      <i class="el-icon-folder-opened marginrl"></i>
      <span class="category" @click="getArticleByCategory(article.category.id, article.category.category)">{{
    article.category.category }}</span>
      <span class="marginrl">|</span>
      <span v-for="(it, ind) in article.tags">
        <i class="el-icon-collection-tag marginrl"></i>
        <span class="tag" @click="getArticleByTagId(it.id, it.tag)">{{ it.tag }}</span>
      </span>
      <span class="marginrl">|</span>
      <i class="el-icon-view marginrl"></i>
      <span>{{ article.view }}</span>
      <span class="marginrl">|</span>
      <i class="el-icon-trophy marginrl"></i>
      <span>{{ article.praise }}</span>
    </div>
    <div v-html="code" class="article markdown-body"></div>
    <el-row style="text-align: center">
      <el-button @click="praiseArticle(article.id)" type="primary" round>点赞</el-button>
    </el-row>
    <replay :showReplay="true" :blogId="blogId" style="margin-top: 5%;"></replay>
    <div>
      <div class="comment-line-box" v-for="comment in comments" :key="comment">
        <div class="comment-list-item">
          <div class="right-box">
            <div class="new-info-box clearfix">
              <div class="comment-top">
                <div class="user-box">
                  <span class="comment-name">{{ comment.userName }}</span>
                  <!-- <el-tag size="mini" type="danger"  style="margin-left: 5px;">作者</el-tag> -->
                  <span class="date">{{ comment.createTime }}</span>

                  <i class="el-icon-chat-round" style="margin-left: 10px;"></i>
                  <span style="margin-left: 3px;" @click="rootCommentShow = !rootCommentShow">回复</span>
                  
                </div>
              </div>
              <div class="comment-center">
                <div class="new-comment">{{ comment.content }}</div>
              </div>

              <replay :rootParentId="comment.id" :comment="comment" :showReplay="rootCommentShow" :blogId="blogId"
          :getCommentList="getCommentList" style="margin-top: 5px;"></replay>

            </div>
            <div>
              <div class="comment-line-box" v-for="childComment in childComments" :key="childComment.id">
                <div class="comment-list-item">
                  <div class="right-box">
                    <div class="new-info-box clearfix">
                      <div class="comment-top">
                        <div class="user-box">
                          <span class="comment-name">{{ childComment.userName }}</span>
                          <span class="date">{{ childComment.createTime }}</span>
                          <i class="el-icon-chat-round" style="margin-left: 10px;"></i>
                          <span class="text" style="margin-left: 3px;color: black;"
  @click="closeReplay(childComment.id);">回复</span>
                          <!-- <span class="nick-name">{{ parentComment.userName }}</span>
                    <span class="date">{{ childComment.createTime }}</span> -->

                        </div>
                      </div>
                      <div class="comment-center">
                        <div class="new-comment">{{ childComment.content }}</div>
                      </div>
                     <replay :rootParentId="rootParentId" :comment="childComment" :showReplay="showReplay[childComment.id]" :blogId="blogId"
                  :getCommentList="getCommentList" style="margin-top: 5px;"></replay>

                    </div>
                  </div>
                </div>                
                <child :childComments="childComment.child" :parentComment="childComment" :blog="blog"
                  :rootParentId="rootParentId" :getCommentList="getCommentList"></child>
              </div>
            </div>
          </div>
        </div>
        
          
      </div>

    </div>
  </div>
</template>

<script>
import marked from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-light.css';
import '../../assets/github-markdown.css'
import axios from "axios";
import replay from '@/components/Blog/replay.vue'

export default {
  name: "ArticleDetail",
  created() {
    this.articleId = this.$route.query.articleId;
    this.getArticleById(this.articleId);
    this.getComment();
  },
  mounted() {
  this.childComments.forEach(comment => {
    this.$set(this.showReplay, comment.id, false);
  });
},
  methods: {
    getComment() {
      axios.get("/api/comment/list/" + this.articleId).then(value => {
        for (let i = 0; i < value.data.data.commentList.length; i++) {
          this.comments.push(value.data.data.commentList[i]);
          console.log(this.comments[i]);
          if (this.comments[this.comments.length - 1].child && this.comments[this.comments.length - 1].child.length > 0){
            for (let j = 0; j < this.comments[i].child.length; j++) {
            this.childComments.push(this.comments[i].child[j])
            console.log("a", this.childComments[j]);
          }
          }
        }

      })
    },
    praiseArticle(id) {
      
      if (JSON.parse(this.$store.state.user).nickname == null) {
        this.$message.error("请先登录！")
        return
      }
      axios.get('/article/praise/' + id).then(value => {
        const data = value.data;
        if (data.success) {
          this.$message.success({ message: data.message });
        } else {
          this.$message.error({ message: data.message })
        }
      })
    },
    getArticleById(id) {
      axios.get('/article/' + id).then(value => {
        const data = value.data;
        if (data.success) {
          this.article = data.content;
          this.getHTML()
        }
      })
    },
    getHTML() {
      marked.setOptions({
        renderer: new marked.Renderer(),
        highlight: function (code) {
          return hljs.highlightAuto(code).value;
        },
        pedantic: false,
        gfm: true,
        tables: true,
        breaks: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        xhtml: false
      });
      this.code = marked(this.article.content);
      this.articleLoading = true
    },
    getArticleByCategory(id, category) {
      this.$router.push({ path: '/archive', query: { categoryId: id, categoryName: category } });
    },
    getArticleByTagId(id, tag) {
      this.$router.push({ path: '/archive', query: { tagId: id, tagName: tag } });
    },
    // 关闭评论回复输入框
    closeReplay(commentId) {
    this.$set(this.showReplay, commentId, !this.showReplay[commentId]);
  },
  },
  data() {
    return {
      code: '',
      article: {},
      articleId: '',
      articleLoading: false,
      rootCommentShow: false,     // 评论回复输入框是否可见
      showReplay: {},     // 是否显示评论回复框
      blogId: null,     // 博客ID
      comments: [],
      childComments: []
    }
  },
  components: {
    replay
  },
  props: {
    parentComment: {
      type: Object,
      default: null
    },
    rootParentId: {
      type: Number,
      default: null
    },
    comment: {
      type: Object,
      default: null
    },
    blog: {
      type: Object,
      default: null
    },
    getCommentList: {
      type: Function,
      default: null
    }
  },
}
</script>

<style scoped>
.article {
  text-align: center;
}

.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
}

@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}

.title {
  margin-bottom: 0;
  text-align: center;
}

.tct {
  margin-top: 10px;
  color: #999999;
  font-size: 13px;
  text-align: center;
}

.category,
.tag {
  cursor: pointer;
}

.category:hover,
.tag:hover {
  text-decoration: underline;
}

.marginrl {
  margin: 0 3px;
}

.comment-line-box {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  position: relative;
  margin-top: 8px;
}

.comment-line-box .comment-list-item {
  display: flex;
  width: 100%;
}

.comment-line-box .right-box {
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
  margin-left: 8px;
}

.comment-line-box .right-box .new-info-box {
  width: 100%;
}

.comment-line-box .right-box .new-info-box .comment-top {
  display: flex;
  -webkit-box-pack: end;
  justify-content: flex-end;
  margin-bottom: 4px;
  line-height: 20px;
  font-size: 14px;
}

.comment-line-box .right-box .new-info-box .user-box {
  -webkit-box-flex: 1;
  flex: 1;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  right: 0;
  top: 0;
  padding-right: 8px;
}

.comment-name {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.date {
  font-size: 14px;
  color: #777888;
  margin-left: 5px;
}

.opt-comment {
  line-height: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 0;
  padding-left: 16px;
  background: #fff;
}

.opt-comment:hover {
  cursor: pointer;
}

.new-comment {
  font-size: 14px;
  color: #222226;
  line-height: 22px;
  word-break: break-word;
}

.replay-box {
  padding-left: 32px;
}

.comment-top .text {
  color: #999aaa;
  margin: 0 6px;
  min-width: 28px;
}

.comment-top .nick-name {
  color: #777888;
  max-width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
